<script setup lang="ts">
import type { PropType } from 'vue'

defineProps({
  data: {
    type: Object as PropType<{
      roles: string[]
      permissions: string[]
    }>,
    required: true
  }
})
</script>

<template>
  <div class="inherent-permission-display">
    <div v-if="data.roles.length > 0">
      <span>来自角色</span>
      <el-divider direction="vertical" />
      <el-tag v-for="(role, _index) in data.roles" :key="_index" size="small">{{ role }}</el-tag>
    </div>
    <div v-if="data.permissions.length > 0">
      <span>来自权限</span>
      <el-divider direction="vertical" />
      <el-tag v-for="(permission, _index) in data.permissions" :key="_index" size="small">{{
        permission
      }}</el-tag>
    </div>
  </div>
</template>

<style lang="scss">
.inherent-permission-display .el-form-item__label {
  --el-form-label-font-size: 12px;
}
</style>
